/*
    1.定位元素（选择元素）===>选择器  selector
    2.加上样式

    CSS的语法：
    选择器｛
        样式属性名1：值1；
        样式属性名2：值2；
        样式属性名3：值3；
        样式属性名4：值4；
    ｝

    选择器的分类：
    1.标签选择器：button，p，a
    2.id选择器：可以唯一定位该元素，该样式只能用于一个元素
        #id名｛
        ｝
        3.类选择器：该样式只能用于多个元素，该样式有可重用性
        .class名{
        }
*/
/*该网页中的button标签都是该样式*/
/*标签选择器*/
button{
    width: 100px;
    height: 40px;
    background-color: #f63;
    color: white;
    border: none;
    font-size: 14px;
}
/*id选择器*/

#search-input{
    width: 402px;
    height: 30px;
    border-color: #f63;
    border:2px solid #f63;/*边框：边框的宽度  solid：实线 颜色*/
}

/*class选择器*/
.cata-tag{
    text-decoration: none; /*文本的默认样式 没有下划线*/
    display: inline-block;
    border: 1px solid #e1e1e1 ;
    font-size:12px ;
    color: gray;
}
p.dq-txt{
    color:#80167B ;
    font-size: 10px;
}

h3 strong{
    color: darksalmon;
    font-size: 20px;
}

h3 .sweet{
    color: aquamarine;
    font-size: 15px;
}

h2>strong{
    color:red;
    font: inherit;
}

.p1>span{
    color: darkmagenta;
    font-size:20px ;
}

.p1>span+strong{
    color: palegreen;
    font-size: 20;
}


input[type="text"]{
    width: 100px;
    height: 20px;
    border: 2px solid crimson;
}

/*父子关系中的选择器：first-child*/
.p2 span:first-child{
    color:red;
    font-size: 20px;
}

/*父子关系选择器：last-child*/
.p2 span:last-child{
    color: yellow;
    font-size: 20px;
}

/*第几个子元素*/
.p2 label:nth-child(2){
    color: blue;
    font-size: 20px;
}

/*倒数第几个子元素  nth-last-child(2)*/
.p2 span:nth-last-child(2){
    color: brown;
    font-size: 20px;
}

/*
    a:link 初始为访问
    a:active 超链接被点击的一瞬间
    a:visited 已经被访问过的
    a:hover 鼠标悬浮
*/
.hot:hover{
    color: indianred;
    border: 2px solid;
}

.username:focus{
    width: 100px;
    height: 20px;
    border: 3px solid slategray;

}